<template>
  <el-row :gutter="0">
    <el-col :span="24" :offset="0">
      <el-carousel :interval="5000" trigger="click" :height="$props.height">
        <el-carousel-item v-for="item of carouselList" :key="item.id">
          <div class="big-box" style="width: 100%; height: 100%">
            <a :href="getFullPath(item.targetUrl)" target="_self">
              <img
                style="width: 100%; height: 100%"
                class="image-source"
                :src="item.bigSource"
                loading="lazy"
              />
            </a>
          </div>
          <div class="small-box">
            <a :href="getFullPath(item.targetUrl)" target="_self">
              <img
                class="image-source"
                :src="item.smallSource"
                loading="lazy"
              />
            </a>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { computed } from "vue";
  import type { CarouselList } from "./../../../types/Home";
  import { getFullPath } from "@/utils/path";

  const props = withDefaults(
    defineProps<{
      height?: string;
      source?: Array<CarouselList>;
    }>(),
    {
      height: "645px",
      source: () => [],
    }
  );

  const carouselList = computed(() => {
    return props.source || [];
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/variable" as *;

  .image-source {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .big-box {
    display: block;
  }
  .small-box {
    display: none;
  }

  .el-carousel__container,
  :deep(.el-carousel__button) {
    width: 100px;
    height: 3px;
  }

  .el-carousel__container,
  :deep(.is-active) {
    .el-carousel__button {
      background: $themeColor;
    }
  }

  @media screen and (max-width: 768px) {
    .big-box {
      display: none;
    }
    .small-box {
      display: block;
    }
  }
</style>
